<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .cont{width:1000px;border: solid 1px black;margin: 20px auto;overflow: hidden;}

        .box{width: 250px;border: solid 1px black;float: left;box-sizing: border-box;text-align: center;}
        .box img{width:80%;height: 200px;}
        .box p{margin: 4px 0;line-height: 20px;height:40px;overflow: hidden;}
        .box .addCart{width:100px;background: #aaf;margin: 0 auto;cursor: pointer;}

        .price{text-decoration: line-through;}
    </style>
</head>
<body>
    <h3>这是商品列表</h3>
    <div class="cont"></div>
<script src="js/jquery.2.2.4.js"></script>
<script>

    class List{
        constructor(){
            this.cont = $(".cont");
            this.url = "http://localhost:3000/api";
            // 开启ajax
            this.load();
        }
        load(){
            $.ajax({
                url:this.url,
                data:{
                    type:"goods"
                },
                success:res=>{
                    console.log(res);
                    this.res = res;
                    this.render();
                },
                dataType:"json"
            })
        }
        render(){
            // console.log(this.res)
            let str = "";
            this.res.forEach(item => {
                                    // 给每个商品添加链接，点击商品时，跳转到详情，并在url后携带当前商品的id值
                str += `<div class="box"><a href="details.html?id=${item.goodsId}">
                            <img src="${item.url.mImg}" alt="">
                            <p>${item.name}</p>
                            <p>
                                售价<span class="price">${item.price}</span>
                            </p>
                            <p class="addCart" data-index="${item.goodsId}">加入购物车</p>
                        </a></div>`;
            });
            this.cont.html(str);
        }
    }
    new List();

</script>
</body>
</html>